<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Modal - Standalone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>

<body>
  <button id="basic" onclick="presentModal()">Present Modal</button>

  <ion-modal-controller></ion-modal-controller>

  <style>
    body > button {
      display: block;
      clear: both;
      width: 100%;
      padding: 12px 8px;
      font-size: 1em;
      background: #f8f8f8;
      border: 1px solid #eee;
      border-radius: 4px;
      margin-bottom: 8px;
    }
  </style>

  <script>
    async function presentModal() {
      const modalController = document.querySelector('ion-modal-controller');
      await modalController.componentOnReady();
      const modalElement = await modalController.create({
        component: 'page-one'
      });
      modalElement.present();
    }
  </script>
</body>
</html>
